<template>
  <view class="root">
    <acme-app-bar title="Popup"></acme-app-bar>
    
    <view class="ui-title">基础用法</view>
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="默认弹出" link @click="showPopup('center')"/>
    </acme-cell-group>

    <view class="ui-title">弹出位置</view>
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="顶部弹出" link @click="showPopup('top')"/>
      <acme-cell title="底部弹出" link @click="showPopup('bottom')"/>
      <acme-cell title="左侧弹出" link @click="showPopup('left')"/>
      <acme-cell title="右侧弹出" link @click="showPopup('right')"/>
    </acme-cell-group>

    <acme-popup v-model="show" :position="position" :styles="{width}"></acme-popup>
  </view>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeCell from "@/components/acme-design/cell"
  
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
    },
    data() {
      return {
        show: false,
        position: 'center',
        width: '100%',
      };
    },
    methods: {
      showPopup(position) {
        this.position = position;
        
        switch(position) {
          case 'center':
            this.width = '90%';
            break;
          case 'top':
            this.width = '100%';
            break;
          case 'bottom':
            this.width = '100%';
            break;
          case 'left':
            this.width = '550rpx';
            break;
          case 'right':
            this.width = '550rpx';
            break;
        }

        this.show = !this.show;
      },
    },
  };
</script>


<style lang="scss" scoped>
  .root {
    min-height: 100vh;
    background: #f7f8fa;
    overflow: hidden;
  }
</style>